<template>
<div class="radio-datepicker">
  <el-radio-group v-model="radio">
    <template v-for ="(item,index) in items">
      <el-radio v-if="item==='year'" :key="index" :label="year" border>{{byyear}}</el-radio>     
      <el-radio v-if="item==='month'" :key="index" :label="month" border>{{bymonth}}</el-radio>
      <el-radio v-if="item==='day'" :key="index" :label="day" border>{{byday}}</el-radio>
    </template>
  </el-radio-group>
  
  <el-date-picker v-show="radio === 'month'"
                  v-model="start1"
                  type="month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="setstart1DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
  <span v-if="radio === 'month' && isrange===true">-</span>
  <el-date-picker v-show="radio === 'month' && isrange===true"
                  v-model="end1"
                  type="month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="setend1DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>

  <el-date-picker v-show="radio === 'year'"
                  v-model="start1"
                  type="year"
                  format="yyyy"
                  value-format="yyyy"
                  @change="setstart1DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
  <span v-if="radio === 'year' && isrange===true">-</span>
  <el-date-picker v-show="radio === 'year' && isrange===true"
                  v-model="end1"
                  type="year"
                  format="yyyy"
                  value-format="yyyy"
                  @change="setend1DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>

  <el-date-picker v-show="radio === 'day'"
                  v-model="start1"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  @change="setstart1DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
  <span v-if="radio === 'day' && isrange===true">-</span>
  <el-date-picker v-show="radio === 'day' && isrange===true"
                  v-model="end1"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  @change="setend1DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>

  <span style="color:blue">&&</span>

  <el-date-picker v-show="radio === 'month'"
                  v-model="start2"
                  type="month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="setstart2DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
  <span v-if="radio === 'month' && isrange===true">-</span>
  <el-date-picker v-show="radio === 'month' && isrange===true"
                  v-model="end2"
                  type="month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="setend2DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>

  <el-date-picker v-show="radio === 'year'"
                  v-model="start2"
                  type="year"
                  format="yyyy"
                  value-format="yyyy"
                  @change="setstart2DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
  <span v-if="radio === 'year' && isrange===true">-</span>
  <el-date-picker v-show="radio === 'year' && isrange===true"
                  v-model="end2"
                  type="year"
                  format="yyyy"
                  value-format="yyyy"
                  @change="setend2DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>

  <el-date-picker v-show="radio === 'day'"
                  v-model="start2"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  @change="setstart2DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
  <span v-if="radio === 'day' && isrange===true">-</span>
  <el-date-picker v-show="radio === 'day' && isrange===true"
                  v-model="end2"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  @change="setend2DateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
</div>
</template>

<style lang="scss">
  .radio-datepicker{
    el-radio, .el-radio__label{
      font-size: 12px;
      vertical-align: middle;
    }
    .label-style{
      font-weight:bold;
      color:$deep-grey;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
      width: 130px;
      margin-left: 5px;
      margin-right: 5px;
      vertical-align: middle
    }
  }
</style>

<script>
import { parseTime } from '@/utils/index'
export default {
  name: 'RadioDatepicker',
  data() {
    return {
      i18Keys: [
        'contrastPeriod',
        'defaultPeriod'
      ],
      year: 'year',
      month: 'month',
      day: 'day',
      byyear: this.$t('datePicker.byyear'),
      bymonth: this.$t('datePicker.bymonth'),
      byday: this.$t('datePicker.byday'),
      radio: this.items[0],
      start1: new Date(),
      end1: new Date(),
      start2: new Date(),
      end2: new Date(),
      radioType: ['day', 'month', 'year'],
      radioDateFormat: ['{y}-{m}-{d}', '{y}-{m}', '{y}'],
      pickerOptions: {
        disabledDate(value) {
          const today = new Date()
          return value >= today
        }
      }
    }
  },
  props: {
    // 用于修改当前控件的值
    value: {
      type: Object
    },
    items: {
      type: Array,
      required: true
    },
    // 是否为开始-结束日期对
    isrange: {
      type: Boolean,
      required: true,
      default: function() {
        return false
      }
    }
  },
  created() {
    this.radio = this.value.radio
    this.start1 = this.value.start1
    this.end1 = this.value.end1
    this.start2 = this.value.start2
    this.end2 = this.value.end2
    // 如果不需要开始-结束日期，结束日期置为空
    if (!(this.isrange === true)) {
      this.end1 = ''
      this.end2 = ''
    }
    this.staticformatIt(this.radio)
  },
  watch: {
    value: {
      handler: function(value) { // 格式化时间
        this.radio = value.radio
        this.start1 = new Date(value.start1)
        this.end1 = new Date(value.end1)
        this.start2 = new Date(value.start2)
        this.end2 = new Date(value.end2)
      },
      deep: true
    },
    radio(value) {
      this.staticformatIt(value)
    }
  },
  methods: {
    setstart1DateFormat(value) {
      this.start1 = value
      // this.start2 = value
      this.staticformatIt(this.radio)
    },
    setend1DateFormat(value) {
      this.end1 = value
      this.staticformatIt(this.radio)
    },
    setstart2DateFormat(value) {
      this.start2 = value
      // this.start2 = value
      this.staticformatIt(this.radio)
    },
    setend2DateFormat(value) {
      this.end2 = value
      this.staticformatIt(this.radio)
    },
    staticformatIt(value) {
      let start1 = this.start1
      let end1 = this.end1
      let start2 = this.start2
      let end2 = this.end2
      const format = this.radioDateFormat[this.radioType.indexOf(value)]
      if (start1 instanceof Date) {
        start1 = parseTime(this.start1, format)
      }
      if (end1 instanceof Date) {
        end1 = parseTime(this.end1, format)
      }
      if (start2 instanceof Date) {
        start2 = parseTime(this.start2, format)
      }
      if (end2 instanceof Date) {
        end2 = parseTime(this.end2, format)
      }
      const para = {
        'radio': value,
        'start1': start1,
        'end1': end1,
        'start2': start2,
        'end2': end2
      }
      this.$emit('input', para)
    }
  }
}
</script>